<%--
  Created by IntelliJ IDEA.
  User: asus
  Date: 2020/11/15
  Time: 1:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri = "http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri ="http://java.sun.com/jsp/jstl/fmt"%>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <link rel="StyleSheet" href="css/jpetstore.css" type="text/css" media="screen"/>
    <link rel="StyleSheet" href="css/searchProduct.css" type="text/css" media="screen"/>
    <link rel="StyleSheet" href="css/cartChange.css" type="text/css" media="screen"/>
    <link rel="StyleSheet" href="css/mouseEventInform.css" type="text/css" media="screen"/>

    <meta name="generator" content="HTML Tidy for Linux/x86 (vers 1st November 2002), see www.w3.org"/>
    <title>MyPetStore</title>
    <meta content="text/html; charset=windows-1252" http-equiv="Content-Type"/>
    <meta http-equiv="Cache-Control" content="max-age=0"/>
    <meta http-equiv="Cache-Control" content="no-cache"/>
    <meta http-equiv="expires" content="0"/>
    <meta http-equiv="Expires" content="Tue, 01 Jan 1980 1:00:00 GMT"/>
    <meta http-equiv="Pragma" content="no-cache"/>

    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<%--    <script type="text/javascript" src="js/cartChange.js"></script>--%>
    <script type="text/javascript" src="js/mouseEvent.js"></script>
<%--    <script type="text/javascript" src="js/updateCart.js"></script>--%>
</head>

<body>

<div id="Header">

    <div id="Logo">
        <div id="LogoContent">
            <a href="main"><img src="images/logo-topbar.gif" /></a>
        </div>
    </div>

    <div id="Menu">
        <div id="MenuContent">
            <a href="viewCart">
                <img align="middle" name="img_cart" src="images/cart.gif" />
            </a>
            <img align="middle" src="images/separator.gif" />
            <c:if test="${sessionScope.account == null}">
            <a href="signOnForm">Sign In</a>
            </c:if>
            <c:if test="${sessionScope.account != null}">
            <a href="signOff">Sign Out</a>
            </c:if>
            <c:if test="${sessionScope.account != null}">
            <img align="middle" src="images/separator.gif" />
            <a href="editAccount">My Account</a>
            </c:if>
<%--            <img align="middle" src="images/separator.gif" />--%>
<%--            <a href="../help.html">?</a>--%>
        </div>
    </div>

    <div id="Search">
        <div id="SearchContent">
            <form action="searchProduct" method="post">
                <input type="text" name="keyword" size="14" id="searchText" onkeyup="showRemainInfo()" list="tips"style=" border-radius: 16.0%";/>
                <datalist id="tips"></datalist>

                <input type="submit" name="searchProducts" value="Search" style="border-radius: 16.0%";/>
                <script src="js/searchProduct.js"></script>
            </form>
        </div>
    </div>

    <div id="QuickLinks">
        <a href="viewCategory?categoryId=FISH">
            <img src="images/sm_fish.gif" />
        </a>
        <img src="images/separator.gif" />
        <a href="viewCategory?categoryId=DOGS">
            <img src="images/sm_dogs.gif" />
        </a>
        <img src="images/separator.gif" />
        <a href="viewCategory?categoryId=REPTILES">
            <img src="images/sm_reptiles.gif" />
        </a>
        <img src="images/separator.gif" />
        <a href="viewCategory?categoryId=CATS">
            <img src="images/sm_cats.gif" />
        </a>
        <img src="images/separator.gif" />
        <a href="viewCategory?categoryId=BIRDS">
            <img src="images/sm_birds.gif" />
        </a>
    </div>

</div>

<div id="Content">